<script>
export default {
  name: 'indexPage',
  data() {
    return {
      class1: 'box',
      class2: ['box1'],
      flag: false,
      class3: [{box: true}, {box1: true}],
      style1: {
        fontSize: '20px',
        color: 'red',
        backgroundColor: '#ccc'
      },
      style2:{
        width: '200px',
        height:'100px'
      }
    }
  },
  methods: {
    changeStyle() {
      this.class2.push('box')
    },
    getColor(n){
      if(n==1){
        return {color:'red'}
      }else{
        return {color:'green'}
      }
    }
  }

}

</script>

<template>
  <!--  使用class样式-->
  <!--  1.数组-->
  <!--<div>-->
  <!--  <div :class="class2">font-size:20px</div>-->
  <!--  <button @click="changeStyle">点击更换样式</button>-->
  <!--</div>-->
  <!--  2.三目表达式-->
  <!--  <div>-->
  <!--    <div :class="flag===true?class1:class2">三目表达式</div>-->
  <!--   <div :class="flag===true?'box1':'box'">三目表达式</div>-->
  <!--      <button @click="changeStyle">点击更换样式</button>-->
  <!--  </div>-->
  <!--  3.对象-->
  <!--  <div>-->
  <!--    <div :class="{'box1':false,'box':true}">class数组</div>-->
  <!--    <button @click="changeStyle">点击更换样式</button>-->
  <!--  </div>-->
  <!--4. 数组内置对象 -->
<!--    <div>-->
<!--      <div :class="class3">数组内置对象</div>-->
<!--      <button @click="changeStyle">点击更换样式</button>-->
<!--    </div>-->
  <!--  使用内联样式-->
  <!--  1.对象-->
<!--  <div>-->
<!--&lt;!&ndash;    <div :style="style1">内联样式对象</div>&ndash;&gt;-->
<!--    <div :style="{fontSize:'20px',color:'red'}">内联样式对象</div>-->
<!--    <button @click="changeStyle">点击更换样式</button>-->
<!--  </div>-->
<!--  2.数组-->
<!--  <div>-->
<!--&lt;!&ndash;      <div :style="style1">内联样式数组</div>&ndash;&gt;-->
<!--      <div :style="[style1,style2]">内联样式数组</div>-->
<!--      <button @click="changeStyle">点击更换样式</button>-->
<!--    </div>-->
<!--  3.函数返回值-->
  <div>
    <!--      <div :style="style1">内联样式数组</div>-->
    <div :style="getColor(2)">内联样式函数返回值</div>
    <button @click="changeStyle">点击更换样式</button>
  </div>
</template>

<style scoped lang="less">
.box {
  width: 100px;
  height: 100px;
  background-color: antiquewhite;
}

.box1 {
  font-size: 20px;
  color: red;
}


</style>